<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('年统计轮值占比图')" />
</head>
<body class="gray-bg">
	<input type="hidden" name="tagid" id="tagid" th:field="*{data.tagid}"/>
	<input type="hidden" name="identify" id="identify" th:field="*{data.identify}"/>
	
	<div class="row  border-bottom white-bg dashboard-header">
        <div class="col-sm-12">
            <div class="select-list">
            	<ul>
            		<li class="select-time">
		              <p>统计日期：</p>
		              <input type="text" class="form-control" id="tjdate" name="tjdate" th:field="*{data.tjdate}" readonly="readonly" style="width:150px;"/>
		            </li>
		            <li>
									<button type="button" class="btn btn-primary btn-sm" style="width:100px;" onclick="tongji()">统计</button>
								</li>
            	</ul>
            </div>
        </div>
    </div>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>轮值（<span th:text="${data.teamname}"></span>）的年统计占比图</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="mychart" style="height: 500px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script type="text/javascript">
	    $(function () {
	    	layui.use('laydate', function(){
     		  var laydate = layui.laydate;
     		  
     		  laydate.render({
     		    elem: '#tjdate',
     		    type: 'year'
     		  });
	      });
	    	
	    	tongji();
	    });
	    
	    // 比对事件
	    function tongji() {
	    	var tjdate = $("#tjdate").val();
	    	var tagid = $("#tagid").val();
	    	var url = ctx + "overrun/dutyyear/zbchart?tagid="+tagid+"&tjdate="+tjdate;
	    	
	    	$.get(url, function(res) {
	    		drawChart(res.xdata, res.ydata1, res.ydata2);
	    	});
	    }
	    
	    // 画图
	    function drawChart(xdata, ydata1, ydata2) {
	    	
	    	var mychart = echarts.init(document.getElementById("mychart"));
	    	mychart.clear();
        var option = {
      		title: [{
   	        text: '轮值超限时长与超限次数占比图',
   	        left: 'center'
     	    },{
   	        text: '超限时长（分）',
   	        left: '26%',
   	        top: '20%'
     	    },{
   	        text: '超限次数',
   	        left: '66%',
   	        top: '20%',
     	    }],
     	    tooltip: {
   	        trigger: 'item',
   	        formatter: '{a} <br/>{b} : {c} ({d}%)'
     	    },
     	    legend: {
   	        orient: 'vertical',
   	        left: 'left',
   	        data: xdata
     	    },
     	    series: [
   	        {
	            name: '超限时长',
	            type: 'pie',
	            radius: '50%',
	            center: ['30%', '60%'],
	            label: {
                formatter: '{b} : {c} ({d}%)'
              },
	            data: ydata1,
	            emphasis: {
	                itemStyle: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
   	        },
   	        {
 	            name: '超限次数',
 	            type: 'pie',
 	            radius: '50%',
 	            center: ['70%', '60%'],
	            label: {
                formatter: '{b} : {c} ({d}%)'
              },
 	            data: ydata2,
	            emphasis: {
	                itemStyle: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
   	        }
      	  ]
       	};
        mychart.setOption(option);

        window.onresize = mychart.resize;
	    }
    </script>
</body>
</html>